<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发布文章</title>
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" th:href="@{https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/css/publicartical.css}">
    <script src="https://cdn.bootcss.com/wangEditor/3.0.16/wangEditor.min.js"></script>
    <link rel="stylesheet"  th:href = "@{/plugins/xcConfirm/xcConfirm.css}">
    <script th:src = "@{/plugins/xcConfirm/xcConfirm.js}"></script>
    <script>
        function getUrlParms(name){
            //获得页面url的某个url参数的方法
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)
                return unescape(r[2]);
            return null;
        }
        var id = getUrlParms("rslt");
        console.log(id);
        if(id=="1"){
            $(function () {
                var txt=  "您输入的内容或图片中包含不合规的信息，请修改！";
                // console.log(txt);
                window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.error);
            })
        }
    </script>

</head>
<!--    发表文章-->
<body>
<!-- content YDC begin -->
<section>
    <div class="ydc-content-slide ydc-body">
        <div class="ydc-flex">
            <!-- right begin -->
            <div class="ydc-column ydc-column-8">
                <div class="ydc-release-content">
                    <div class="ydc-tabPanel ydc-tabPanel-release">
                        <div class="ydc-panes">
                            <!--                                    发表文章-->
                            <!--                            th:action="@{/user/publicArticle}" method="post"  enctype="multipart/form-data"-->
                            <form th:action="@{/user/addArticle}" method="post" onsubmit="return check();"  enctype="multipart/form-data">
                                <div class="ydc-pane" style="display:block;">
                                    <div class="ydc-release-form-group ">
                                        <div class="ydc-release-form-group-input">
                                            <input type="text" class="ydc-form-control" title=""
                                                   placeholder="请输入标题"
                                                   name="title" id="title_value">
                                        </div>
                                    </div>
                                    <div class="ydc-release-form-group ">
                                        <div class="ydc-release-form-group-input">
                                            <input type="text" class="ydc-form-control" title=""
                                                   placeholder="请输入预标题"
                                                   name="title" id="subtitle_value">
                                        </div>
                                    </div>
                                    <div class="ydc-release-form-text" >
                                        <div id="intro" class="TextContent"></div>
                                        <textarea style="display: none" name="mytxtIntro" id="txtIntro" ></textarea>
                                    </div>
                                    <div class="ydc-form-city ">
                                        <div class="aui-card-form-item ">
                                            <label class="aui-card-form-label">分类:</label>
                                            <div class="aui-card-form-input" >
                                                <select id="p" name="artTypeId" >
                                                    <option th:each="tagList:${tagList}"
                                                            th:text="${tagList.tag}"
                                                            th:value="${tagList.id}"
                                                            id="artTypeIdValue">
                                                        <!--                                                            <li  th:text="${articleTypes.getArtType()}"-->
                                                        <!--                                                                 th:value="${articleTypes.getArtTypeId()}" name="artTypeId">互联网</li>-->
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="aui-card-form-item preview  aui-news">
                                            <label class="aui-card-form-label">封面:</label>
                                            <div class="aui-file-up-img" id="preview_0">
                                                <img id="imghead_1" border="0" src="" >
                                            </div>
                                            <div class="aui-file-up-btn clearfix ">
                                                <input name="imgFileUp" id="img-upload"  type="file"
                                                       accept="image/*" enctype="multipart/form-data" />
                                                <script type="text/javascript">
                                                    $('#img-upload').change(function(e){
                                                        var input = $("#img-upload");
                                                        var f = input[0].files[0];//获取input上传的文件
                                                        if(!f.name){
                                                            alert("未选择图片");
                                                            // console.log("111");
                                                        }else{
                                                            //高版本浏览器对文件上传路径进行了安全处理，无法直接通过获取input的value进行访问，故转化为获取图片的url进行安全访问
                                                            var url = window.URL.createObjectURL(f);//将上传的文件转化为url
                                                            $("#imghead_1").attr('src', url);//更新img的src属性
                                                            $("#imghead_1").attr('imgVal', 1);//更新img的src属性
                                                        };
                                                    });
                                                </script>
                                            </div>
                                            <div class="aui-card-form-item ">
                                                <input type="submit" class="btn " value="发布" id="submitBtn"/>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                            </form>



                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- right end -->
    </div>
    </div>
</section>
<!-- content YDC end -->
<!--富文本编辑器-->
<script>
    var E = window.wangEditor;
    // var editor = new E('#editor');

    var editor = new E('#intro');

    //    获取隐藏控件<textarea>的id，用于显示内容，也方便后台获取内容
    var $text1 = $('#txtIntro');

    // 监控wangEditor中的内容变化，并将html内容同步更新到 textarea
    editor.customConfig.onchange = function (html) {
        $text1.val(html);
    }

    editor.customConfig.debug = true;
    //文件上传
    editor.customConfig.showLinkImg = false; // 隐藏“网络图片”tab
    editor.customConfig.uploadImgMaxSize = 1024 * 1024 * 1024;//默认限制图片大小是 10M
    // 限制一次最多上传 10 张图片
    // editor.customConfig.uploadImgMaxLength = 10;
    editor.customConfig.uploadImgParamsWithUrl = true;//如果还需要将参数拼接到 url 中，可再加上如下配置
    editor.customConfig.uploadImgServer = '[[@{/admin/article/uploadimg}]]';//官方文档上写的是服务器地址，也就是上传图片的方法名
    editor.customConfig.uploadFileName = 'imgs';     //给上传的本地图片文件命名的统一名称

    editor.customConfig.uploadImgHooks = {
        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        fail: function (xhr, editor, result) {
            alert("图片插入失败");
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            alert("图片上传出错");
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            var url = result.url;
            insertImg(url);
        }

    }

    editor.create();
    // //提交时获取内容
    // function getContent() {
    //     //获取内容
    //     var content=editor.txt.html();
    //     alert(content);
    //     $("#content").val(content);
    // }
</script>


<!---->
<script>
    //判断是否添加了标题
    $("#submitBtn").on('click',function () {
        var title_value = $("#title_value").val();
        // console.log("title:"+title_value);
        //判断是否写入了标题
        if (title_value==0){
            $(function () {
                var txt=  "请添加标题";
                window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning);
            })
            return false;
        }
        //判断是否加入了内容
        var intro =$('#txtIntro').val();
        console.log("intro:"+intro);
        if (intro== ""){
            $(function () {
                var txt=  "请添加内容";
                window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning);
            })
            return false;
        }

        //判断是否添加封面
        var imghead_1= $("#imghead_1").attr('imgVal');
        if (imghead_1!=1){
            $(function () {
                var txt=  "请添加封面";
                window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning);
            })
            return false;
        }

    })



</script>

</body>
</html>
